<script setup lang="ts" name="SelectBulkTallyType">
import { useDictInfo } from "@/store/dict";


import { onMounted, ref, watch } from "vue";
import { Dictionary } from "@/api/blade";
import type { DictItem } from "@/utils/interface";

const input = defineProps(["tallyType"]);
const emit = defineEmits(["isOpen", "selectBulkTallyType"]);

const loading = ref(false);
const resData = ref({} as DictItem);
const tallyTypeList = ref([] as Array<DictItem>);

onMounted(() => {
  init();
});

function init() {
  loading.value = true;
  Dictionary({ code: "tally_type" }).then((res: any) => {
    if (res.data) {
      const list = res.data.sort((n1: DictItem, n2: DictItem) => {
        return n1.sort - n2.sort;
      }) as DictItem[];
      tallyTypeList.value = list.filter(i => i.remark.indexOf("bulk;") >= 0);
      tallyTypeList.value.forEach(item => {
        if (input.tallyType !== "" && item.dictKey === input.tallyType) {
          item.isSelected = true;
        }
      });
    }
    loading.value = false;
  });
}

function selectItem(data: DictItem) {
  tallyTypeList.value.forEach(item => {
    item.isSelected = item.dictKey === data.dictKey;
  });
  resData.value = data;
}

function returnRes() {
  emit("selectBulkTallyType", resData.value);
  showPop(false);
}

function showPop(show: boolean) {
  emit("isOpen", show);
}
</script>

<template>
  <div class="flex-col h-[auto] p-[20px] w-full" style="background: #f6f6f6">
    <div class="flex h-[30px] justify-between">
      <div
        class="flex justify-center items-center h-full text-center text-base"
      >
        选择作业过程
      </div>
      <div
        class="flex h-full justify-center items-center text-center text-base"
      >
        <div class="text-sky-500" @click="returnRes">确定</div>
      </div>
    </div>
    <div class="flex py-[12px] w-full h-auto flex-wrap gap-2">
      <van-loading
        class="flex w-full justify-center h-[80px] items-center"
        v-if="loading"
        color="#1989fa"
      />
      <div
        :class="{ selected: item.isSelected, unselected: !item.isSelected }"
        class="flex border-2 border-white py-[5px] px-[10px] w-auto text-sm rounded"
        v-for="item in tallyTypeList"
        :key="item.dictKey"
        @click="selectItem(item)"
      >
        {{ item.dictValue }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.unselected {
  background: #ffffff;
  color: #000000;
}
.selected {
  background: #3869fc;
  color: #ffffff;
}
</style>
